<template>
	<div class="home-header">
		<div class="header-left">
			<i class="iconfont">&#xe613;</i>
		</div>
		<div class="header-search">
			<i class="iconfont">&#xe623;</i>
			输入城市/景点/游玩主题
		</div>
		<div class="header-right">
			<router-link to="/city">
				{{city}}<i class="iconfont">&#xe6f1;</i>
			</router-link>
		</div>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	export default{
		computed:{
			...mapState(['city'])
		}
	}
</script>
<style scoped>
 	.home-header{
 		width:100%;
 		display:flex;
 		position:fixed;
 		z-index:50;
 		line-height:0.88rem;
 		background:#00bcd4;
 		color:#fff;
 	}
 	.header-left{
 		width:0.4rem;
 		padding:0 0.2rem;
 		font-size:0.36rem;
 	}
 	.header-search{
 		flex:1;
 		font-size:0.28rem;
 		color:#e4e7ea;
 		padding-left:0.2rem;
    	margin: .12rem 0;
    	background: #fff;
    	line-height: .6rem;
    	border-radius: .1rem;
 	}
 	.header-right{
 		padding:0 0.2rem;
 		font-size:0.3rem;
 		margin-left:0.3rem;
 	}
 	.header-right i{
 		font-size:0.48rem;
 	}
 	.header-right a{
 		color:#fff;
 	}
</style>